<template>
    <div class="test-change-box custom-theme" :style="colors">
        <button @click="value = true">SET COLOR</button>
        <button @click="ChangeColor">CHANGE COLOR</button>

        <SeptCalendar height="1000">
            <div
                v-for="(item, index) in [
                    { unique: '2023-11-30' },
                    { unique: '2023-11-2' },
                    { unique: '2023-11-20' },
                    { unique: '2023-11-22' },
                    { unique: '2023-11-23' },
                    { unique: '2023-11-24' },
                    { unique: '2023-11-22_0-1' },
                    { unique: '2023-11-22_1-2' },
                    { unique: '2023-11-22_2-3' },
                    { unique: '2023-11-22_3-4' }
                ]"
                :key="index"
                :slot="item.unique"
            >
                <SeptButton :label="item.unique"></SeptButton>
            </div>
        </SeptCalendar>
        <SeptDrawer
            :direction="'right'"
            transfer
            caption="我是标题"
            width="500"
            v-model="value"
        >
            <template>
                <div style="height:100%;width:100%;overflow:auto">
                    <div v-for="(color, key) in colors" :key="color">
                        <span>{{ key }}</span>
                        <br />
                        <SeptInput v-model="colors[key]"></SeptInput>
                        <SeptColorPicker
                            :value="colors[key]"
                            :transfer="true"
                            @exe-click="e => (colors[key] = e)"
                        ></SeptColorPicker>
                    </div>
                </div>
            </template>
        </SeptDrawer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: false,
            colors: {
                "--secondary-font-color": "#405680",

                "--default-border-color": "#CFD7E5",

                "--secondary-background-color": "#FFFFFF",

                "--active-operate-background-two": "#0061FF",

                "--active-operate-color-two": "#FFFFFF",

                "--theader-background-color": "#F5F7FA",

                "--default-text-color": "rgba(64, 86, 128, .6)",

                "--option-background-color": "#FFFFFF",

                "--shadow-color": "rgba(225, 230, 240, .6)",

                "--divider-border-color-two": "#E1E6F0",

                "--placeholder-font-color": "rgba(64, 86, 128, .6)",

                "--option-active-background-color": "#EBEEF5"
            }
        };
    },
    mounted() {
        let objmap = {
            "#405680": "#405680",
            "rgba(207, 215, 229, .6)": "rgba(207, 215, 229, .6)",
            "rgba(207, 215, 229, .3)": "rgba(207, 215, 229, .3)",
            "rgb(255,255,255)": "rgb(255,255,255)",
            "rgb(0,97,255)": "rgb(0,97,255)",
            "rgb(40,53,78)": "rgb(40,53,78)",
            "rgb(47,62,89)": "rgb(47,62,89)",
            "rgb(36,46,66)": "rgb(36,46,66)",
            "rgb(62,79,111)": "rgb(62,79,111)",
            "rgb(78,99,137)": "rgb(78,99,137)",
            "rgba(0, 0, 0, .5)": "rgba(0, 0, 0, .5)",
            "rgb(54,71,102)": "rgb(54,71,102)",
            "rgba(36, 46, 66, .6)": "rgba(36, 46, 66, .6)",
            "rgb(0,145,255)": "rgb(0,145,255)",
            "rgb(27,179,143)": "rgb(27,179,143)",
            "rgb(231,121,48)": "rgb(231,121,48)",
            "rgb(213,57,57)": "rgb(213,57,57)"
        };
        this.ChangeColor(objmap);
    },
    methods: {
        ChangeColor(obj, el = document.querySelector("#app")) {
            let objmap = {};
            // 生成颜色map对象
            Object.entries(obj).forEach(item => {
                if (item[1].indexOf("#") + 1 || item[0].indexOf("#") + 1) {
                    objmap[
                        this.$_T.Hex2Reg(item[0]).replace(/\s*/g, "")
                    ] = this.$_T.Hex2Reg(item[1]).replace(/\s*/g, "");
                } else {
                    objmap[item[0].replace(/\s*/g, "")] = item[1].replace(
                        /\s*/g,
                        ""
                    );
                }
            });
            // 获取el下的所有元素
            const elements = el.querySelectorAll("*");

            // 遍历所有元素
            elements.forEach(element => {
                // 获取元素的计算样式
                const computedStyle = window.getComputedStyle(element);

                // 获取元素的背景颜色
                const backgroundColor = computedStyle.backgroundColor;

                // 获取元素的文本颜色
                const color = computedStyle.color;

                // 将颜色数据添加到数组中
                if (
                    backgroundColor !== "transparent" &&
                    backgroundColor != "rgba(0, 0, 0, 0)" &&
                    backgroundColor != "rgb(0, 0, 0)"
                ) {
                    element.style.backgroundColor = objmap[backgroundColor]
                        ? objmap[backgroundColor]
                        : backgroundColor;
                }
                if (
                    color !== "transparent" &&
                    color != "rgba(0, 0, 0, 0)" &&
                    color != "rgb(0, 0, 0)"
                ) {
                    element.style.color = objmap[color.replace(/\s*/g, "")]
                        ? objmap[color.replace(/\s*/g, "")]
                        : color;
                }
            });
        }
    }
};
</script>

<style lang="less">
.custom-theme {
    .sept-calendar- {
        &box {
            color: var(--secondary-font-color);
        }
        &header {
            &-right {
                &-jump {
                    border-color: var(--default-border-color);
                    background-color: var(--secondary-background-color);
                }
                .week-view {
                    &-seven {
                        background-color: var(--active-operate-background-two);
                        color: var(--active-operate-color-two);
                    }
                }
            }
            &-type {
                border-color: var(--default-border-color);
                background-color: var(--secondary-background-color);
                span {
                    &:hover {
                        background-color: var(--active-operate-background-two);
                        color: var(--active-operate-color-two);
                        &::after {
                            border-color: var(--active-operate-background-two);
                        }
                    }
                }
                .on-span {
                    background-color: var(--active-operate-background-two);
                    color: var(--active-operate-color-two);
                    &::after {
                        border-color: var(--active-operate-background-two);
                    }
                }
            }
        }
        &month {
            border-color: var(--default-border-color);
            &-first {
                background-color: var(--theader-background-color);
            }
            &-row {
                background-color: var(--secondary-background-color);
                //单元格
                .row-span {
                    .first-line {
                        .current-day {
                            background-color: var(
                                --active-operate-background-two
                            );
                            color: var(--active-operate-color-two);
                        }
                    }
                    .outof-month {
                        color: var(--default-text-color);
                    }
                    //日程
                    .sept-calendar-schedule- {
                        //添加日程按钮
                        &btn {
                            background: var(--option-background-color);
                            border-color: var(--default-border-color);
                            box-shadow: 0 2px 8px var(--shadow-color);
                            &:hover {
                                // background: lighten(
                                //     var(--option-background-color),
                                //     20%
                                // );
                            }
                            &:active {
                                // background: darken(
                                //     var(--option-background-color),
                                //     5%
                                // );
                            }
                        }
                    }
                }
                //单元格线
                &:nth-last-of-type(n + 2) {
                    .row-span:nth-last-of-type(n + 2) {
                        border-right-color: var(--divider-border-color-two);
                        border-bottom-color: var(--divider-border-color-two);
                    }
                    .row-span:nth-last-of-type(1) {
                        border-bottom-color: var(--divider-border-color-two);
                    }
                }
                &:nth-last-of-type(1) {
                    .row-span:nth-last-of-type(n + 2) {
                        border-right-color: var(--divider-border-color-two);
                    }
                }
            }
            //添加日程气泡
            .sept-calendar-schedule-bubble {
                background: var(--option-background-color);
                border-color: var(--default-border-color);
                box-shadow: 0px 2px 8px var(--shadow-color);
                //外轮廓尖角
                .sept-calendar-corner- {
                    &left {
                        border-left-color: var(--default-border-color);
                        border-bottom-color: var(--default-border-color);
                        background-color: var(--option-background-color);
                        box-shadow: 0 2px 8px var(--shadow-color);
                        &::after {
                            background-color: var(--option-background-color);
                        }
                    }
                    &right {
                        border-right-color: var(--default-border-color);
                        border-top-color: var(--default-border-color);
                        background-color: var(--option-background-color);
                        &::after {
                            background-color: var(--option-background-color);
                        }
                    }
                }
                //内容区
                &-content {
                    div[name="header"] {
                        border-bottom-color: var(--divider-border-color-two);

                        input {
                            color: var(--default-text-color);

                            &:hover,
                            &:focus {
                                color: var(--secondary-font-color);
                            }
                            &::placeholder {
                                color: var(--placeholder-font-color);
                            }
                        }

                        .sept-calendar-schedule-options {
                            background-color: var(--option-background-color);
                            border-color: var(--default-border-color);
                            box-shadow: 0 2px 8px var(--shadow-color);

                            div[name="option"] {
                                &:hover {
                                    background-color: var(
                                        --option-active-background-color
                                    );
                                }
                            }
                        }
                    }
                    textarea {
                        color: var(--default-text-color);

                        &:hover,
                        &:focus {
                            color: var(--secondary-font-color);
                        }
                        &::placeholder {
                            color: var(--placeholder-font-color);
                        }
                    }
                }
            }
            //日程操作菜单
            .sept-calendar-schedule-menu {
                background: var(--option-background-color);
                border-color: var(--default-border-color);
                box-shadow: 0px 2px 8px var(--shadow-color);

                div {
                    &:hover {
                        background-color: var(--option-active-background-color);
                        // color: var(--active-operate-color-two);
                    }
                }
            }
        }
        &year {
            background-color: var(--secondary-background-color);
            border-color: var(--default-border-color);

            .year-row {
                .year-column {
                    .small-month {
                        .row {
                            .out-of-month {
                                color: var(--placeholder-font-color);
                            }
                            .choice-day {
                                background-color: var(
                                    --active-operate-background-two
                                );
                                color: var(--active-operate-color-two);
                            }
                        }
                    }
                }
            }
        }
        &week {
            background-color: var(--secondary-background-color);
            border-color: var(--default-border-color);

            .sept-calendar-week-head {
                &-item-date {
                    background-color: var(--theader-background-color);
                }
                &-item {
                    background-color: var(--theader-background-color);
                }
            }
            .sept-calendar-week-body {
                .week-head-all-day {
                    &-item-date {
                        border-right: 0.5px solid
                            var(--divider-border-color-two);
                        border-bottom: 0.5px solid
                            var(--divider-border-color-two);
                    }
                    &-item {
                        border-right: 0.5px solid
                            var(--divider-border-color-two);
                        border-bottom: 0.5px solid
                            var(--divider-border-color-two);
                    }
                }
                .week-body {
                    .week-item-column-split {
                        .item-column-split {
                            border-right: 0.5px solid
                                var(--divider-border-color-two);
                        }
                    }
                    .week-item-column {
                        border-right: 0.5px solid
                            var(--divider-border-color-two);

                        .week-item-row {
                            border-bottom: 0.5px solid
                                var(--divider-border-color-two);
                        }
                    }
                }
            }
        }
        &day {
            background-color: var(--secondary-background-color);
            border-color: var(--default-border-color);

            &-head {
                .week-head {
                    &-item-date {
                        background-color: var(--theader-background-color);
                    }
                    &-item {
                        background-color: var(--theader-background-color);
                    }
                }
                .chinese-day-header {
                    background-color: var(--theader-background-color);
                }
            }
            &-body {
                &-left {
                    .week-head-all-day {
                        &-item-date {
                            border-right: 0.5px solid
                                var(--divider-border-color-two);
                            border-bottom: 0.5px solid
                                var(--divider-border-color-two);
                        }
                        &-item {
                            border-right: 0.5px solid
                                var(--divider-border-color-two);
                            border-bottom: 0.5px solid
                                var(--divider-border-color-two);
                        }
                    }
                    .week-body {
                        .week-item-column-split {
                            .item-column-split {
                                border-right: 0.5px solid
                                    var(--divider-border-color-two);
                            }
                        }
                        .week-item-column {
                            border-right: 0.5px solid
                                var(--divider-border-color-two);

                            .week-item-row {
                                border-bottom: 0.5px solid
                                    var(--divider-border-color-two);
                            }
                        }
                    }
                }
                &-right {
                    .right-calendar-body {
                        &-content {
                            background-color: var(--option-background-color);
                            border-color: var(--default-border-color);

                            .small-month {
                                .row {
                                    .out-of-month {
                                        color: var(--placeholder-font-color);
                                    }
                                    .choice-day {
                                        background-color: var(
                                            --active-operate-background-two
                                        );
                                        color: var(--active-operate-color-two);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="less">
.test-change-box {
    width: 100%;
    height: 100%;
    background-color: gray;
}
</style>
